import React, { useEffect, useState } from 'react'
import axios from '../../api/index'
import { InfiniteScroll, NavBar } from 'antd-mobile'
import styles from './index.module.css'
import { useNavigate } from 'react-router-dom'
function index() {
  const nav=useNavigate()
  const [start,setStart]=useState('北京')
  const [end,setEnd]=useState('三亚')
  const [list,setList]=useState([])
  const [page,setPage]=useState(1)
   const [hasMore, setHasMore] = useState(true)
  const getdata=async()=>{//请求列表详情
    const res=await axios.post('/api/trip/train',{start,end,page})
    console.log(res)
    setList(list.concat(res.data.data))
    setPage(pre=>{pre+1})
    if(res.data.data.length===0){
      setHasMore(false)
    }
  }
  useEffect(()=>{
    getdata()
  },[])
  const godetail=(v)=>{//点击跳转
    nav('/detail',{state:v})
  }
  return (
    <div>
      <NavBar>车次列表</NavBar>
      <div>
        {
          list.map((v,i)=>(
            <div key={i} className={styles.list} onClick={()=>godetail(v)}>
              <div className={styles.list1}><span>{v.start}</span></div>
              <div className={styles.list1}><span>{v.end}</span></div>
              <div className={styles.list1}><span>{v.startTime}</span></div>
              <div>
                <span className={styles.list2}>￥{v.tick.vip}</span><br/>
                <span className={styles.list2}>￥{v.tick.firstTick}</span><br/>
                <span className={styles.list2}>￥{v.tick.secondTick}</span><br/>
              </div>
            </div>
          ))
        }
      </div>
      <InfiniteScroll loadMore={getdata} hasMore={hasMore} />
      {/* 列表上拉加载 */}
    </div>
  )
}

export default index